
<template>

<div>
 <el-row align="middle" type="flex" justify="space-between" style="background-color: #409EFF; height: 44px;">
      <el-col :span="6" :offset="1">
        <router-link to="/">
          <h3 style="color: #fff; font-weight: 600; font-size: 18px;">
            <i class="fa fa-fort-awesome" style="font-size: 24px;"></i>&nbsp;&nbsp; 零售商城
          </h3>
        </router-link>
      </el-col>

      <el-col v-if="!username" :span="12">
          <router-link to="/my-order">
            <el-link class="header-bar">我的订单</el-link>
          </router-link>
          <router-link to="/login">
            <el-link class="header-bar">登录</el-link>
          </router-link>
          <router-link to="/reg">
            <el-link class="header-bar">没有账号? 注册</el-link>
          </router-link> 
      </el-col>

  

<el-dropdown v-else trigger="click">
  <div class="block" >
          <el-avatar shape="square" :size="50"  :src="url">{{username}}</el-avatar>
      </div>
  <el-dropdown-menu  slot="dropdown">
      <el-dropdown-item ><el-button type="primary">我的订单</el-button></el-dropdown-item>
    <!-- <el-dropdown-item >个人设置</el-dropdown-item>目前没找到对应页面 -->
    <el-dropdown-item ><el-button @click="quit" type="danger">退&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;出</el-button></el-dropdown-item>
    

  </el-dropdown-menu>
</el-dropdown>

  </el-row>
  
</div>

</template>

<script>  
import http from '@/core/HttpRequest.js'
export default {
  data(){
    return{
      username:'',
      img:'',
      url:''
    }
  },
  mounted(){
     this.username= this.$cookies.get('username')
     if(this.$cookies.get('username')){
       http.post('/user/usermsg',{"username":this.username}).then(res=>{
                let data= res.data.data
                this.url=data.userImg
       })
     }
  },
  methods:{
      quit(){
        this.$cookies.remove('access_token')
        this.$cookies.remove('refresh_token')
        this.$cookies.remove('username')
        this.$router.go(0)

      }
  }

}
</script>

<style scoped>
    .header-bar {
        color: #fff; 
        margin-right: 20px;
        float: right;
    }
    .header-bar:hover {
        color: #fff;
    }
</style>

